<template>
    <div class="bottom-tab">
        <span class="tab-item" @click="switchTo('/home')">
            <img :src=" $route.path.includes('/home') ? tabBerArr[0].selected : tabBerArr[0].normal">
            <span :class="{on :$route.path.includes('/home')}">首页</span>
        </span>
        <span class="tab-item" @click="switchTo('/recommend')">
            <img :src=" '/recommend'===$route.path ? tabBerArr[1].selected : tabBerArr[1].normal">
            <span :class="{on : '/recommend'===$route.path}">推荐</span>
        </span>
        <span class="tab-item" @click="switchTo('/search')">
            <img :src=" '/search'===$route.path ? tabBerArr[2].selected : tabBerArr[2].normal">
            <span :class="{on : '/search'===$route.path}">搜索</span>
        </span>
        <span class="tab-item" @click="switchTo('/chat')">
            <img :src=" '/chat'===$route.path ? tabBerArr[3].selected : tabBerArr[3].normal">
            <span :class="{on : '/chat'===$route.path}">聊天</span>
        </span>
        <span class="tab-item" @click="switchTo('/me')">
            <img :src=" '/me'===$route.path ? tabBerArr[4].selected : tabBerArr[4].normal">
            <span :class="{on : '/me'===$route.path}">我的</span>
        </span>
    </div>
</template>

<script>
    export default {
        name: "TabBar",
        data(){
            return{
                tabBerArr:[
                    {normal:require("./../assets/img/icon_home.png"),selected:require("./../assets/img/icon_home_selected.png")},
                    {normal:require("./../assets/img/icon_intro.png"),selected:require("./../assets/img/icon_intro_selected.png")},
                    {normal:require("./../assets/img/icon_search.png"),selected:require("./../assets/img/icon_search_selected.png")},
                    {normal:require("./../assets/img/icon_chat.png"),selected:require("./../assets/img/icon_chat_selected.png")},
                    {normal:require("./../assets/img/icon_mine.png"),selected:require("./../assets/img/icon_mine_selected.png")}
                ]
            }
        },
        methods:{
            switchTo(path){
                // console.log(this.$router);
                this.$router.replace(path)
            }
        }
    }
</script>

<style scoped lang="stylus">
    .bottom-tab
       width 100%
       height 50px
       position fixed
       bottom 0
       left 0
       background-color #fff
       display flex
       z-index 999
       .tab-item
            display flex
            flex 1
            flex-direction column
            justify-content center
            align-items center
            font-size 14px
            color #666
            img
                width 35%
                margin-bottom 2px
    .on
        color red

</style>